@charset "utf-8";
@import "common/reset";
@function r($px) {
    @return $px/100*1rem;
}

.web {
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-size: 0;
    background: #000;
    //音乐
    .musicSwitch{
        width: r(58);
        height: r(58);
        position: absolute;
        top: r(34);
        right: r(48);
        background: url(../img/running/btn_switch.png) no-repeat;
        background-position:0 0;
        background-size: 100%;
        z-index: 99;
    }
    .mute{
            background-position: 0 r(-58); 
        }
    //预加载
    .re_load {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        font-size: r(50);
        color: #fff;
        background: #000;
        z-index: 100;
        span {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    }
    //首页
    .wrap {
        width: 100%;
        height: 100%;
        background-image: url(../img/run/bg_run.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        position: relative;
        .run {
            width: r(278);
            height: r(72);
            position: absolute;
            bottom: r(214);
            left: r(188);
            img {
                width: 100%
            }
        }
        .stop {
            width: r(278);
            height: r(72);
            position: absolute;
            bottom: r(128);
            left: r(173);
            img {
                width: 100%;
            }
        }
    }
    //规则页
    .rule_box {
        display: none;
        font-size: 0;
        width: 100%;
        height: 100%;
        background: #000;
        position: relative;
        .tit1 {
            position: absolute;
            width: r(433);
            height: r(50);
            top: r(118);
            left: r(102);
            img {
                width: 100%;
            }
        }
        .tit2 {
            position: absolute;
            width: r(164);
            height: r(37);
            top: r(188);
            left: r(224);
            img {
                width: 100%;
            }
        }
        .rule_txt {
            position: absolute;
            width: r(516);
            height: r(108);
            top: r(278);
            left: 50%;
            transform: translateX(-50%);
            img {
                width: 100%;
            }
        }
        .phone {
            position: absolute;
            width: r(177);
            height: r(159);
            top: r(452);
            left: 50%;
            transform: translateX(-50%);
            img {
                width: 100%;
            }
        }
        .rule_start {
            position: absolute;
            width: r(275);
            height: r(70);
            top: r(709);
            left: 50%;
            transform: translateX(-50%);
            img {
                width: 100%;
            }
        }
    }
    //挑战成功
    .success_box {
        display: none;
        width: 100%;
        height: 100%;
        background-color: transparent;
        background: url(../img/success/bg_suc.jpg) left top no-repeat;
        background-size: 100% 100%;
        position: relative;
        font-size: 0;
        z-index: 5;
        .suc {
            position: absolute;
            width: r(520);
            height: r(167);
            top: r(268);
            left: r(45);
            img {
                width: 100%;
            }
        }
        .tip {
            position: absolute;
            width: r(441);
            height: r(35);
            top: r(436);
            left: 50%;
            transform: translateX(-50%);
            img {
                width: 100%;
            }
        }
        .car_position {
            position: absolute;
            width: r(229);
            height: r(59);
            top: r(491);
            left: r(92);
            img {
                width: 100%;
            }
        }
        .now_share {
            position: absolute;
            width: r(228);
            height: r(59);
            top: r(491);
            left: r(315);
            img {
                width: 100%;
            }
        }
    }
    //挑战失败
    .fail_box {
        display: none;
        width: 100%;
        height: 100%;
        background-color: #272727;
        position: relative;
        font-size: 0;
        z-index: 5;
        .fail {
            position: absolute;
            width: r(456);
            height: r(107);
            top: r(314);
            left: r(104);
            img {
                width: 100%;
            }
        }
        .fail_til {
            position: absolute;
            width: r(446);
            height: r(35);
            top: r(436);
            left: 50%;
            transform: translateX(-50%);
            img {
                width: 100%;
            }
        }
        .again_btn {
            position: absolute;
            width: r(225);
            height: r(59);
            top: r(491);
            left: r(92);
            img {
                width: 100%;
            }
        }
        .now_share {
            position: absolute;
            width: r(228);
            height: r(59);
            top: r(491);
            left: r(315);
            img {
                width: 100%;
            }
        }
    }
    //比赛开始
    .road {
        display: none;
        font-size: 0;
        width: 100%;
        height: 100%;
        position: relative;
        overflow: hidden;
        .daojishi {
            width: 100%;
            height: 100%;
            text-align: center;
            font-size: r(50);
            color: white;
            font-weight: bold;
            position: absolute;
            left: 0;
            top: 0;
            z-index: 2;
        }
        .level_box {
            width: 100%;
            height: 100%;
            z-index: 3;
            position: absolute;
            top: 0;
            left: 0;
            .level {
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                width: r(100);
                height: r(100);
                border-radius: 50%;
                color: #000;
                font-size: r(30);
                text-align: center;
                line-height: r(100);
            }
            .easy {
                left: r(50);
                background: skyblue;
            }
            .hard {
                right: r(50);
                background: red;
            }
        }
        ul {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            transition: all 1s linear;
            li {
                width: 100%;
                height: 100%;
                background-image: url(../img/running/road.jpg);
                background-size: 100%;
                transform: translateX(0);
                &:nth-of-type(2) {
                    transform: translateY(-200%);
                }
            }
        }
        .later {
            position: fixed;
            top: r(10);
            right: r(20);
            font-size: r(30);
            color: #fff;
        }
        .button {
            width: r(120);
            height: r(120);
            border-radius: 50%;
            background-color: #87ceeb;
            opacity: .6;
            position: fixed;
            bottom: r(176);
            z-index: 1;
            display: none;
        }
        .right {
            right: r(0);
            &::after {
                width: 0;
                height: 0;
                content: "";
                border-left: r(30) solid #fff;
                border-bottom: r(15) solid transparent;
                border-top: r(15) solid transparent;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                z-index: 2;
            }
        }
        .left {
            left: r(0);
            &::after {
                width: 0;
                height: 0;
                content: "";
                border-right: r(30) solid #fff;
                border-bottom: r(15) solid transparent;
                border-top: r(15) solid transparent;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                z-index: 2;
            }
        }
        .car {
            width: r(60);
            height: r(93);
            background: url(../img/running/car.png);
            background-size: 100% auto;
            position: fixed;
            z-index: 1;
            bottom: r(-93);
            left: r(500);
            transition: all 1s ease-in;
        }
        .car2 {
            width: r(82);
            height: r(161);
            background: url(../img/running/car2.png);
            background-size: 100% auto;
            position: absolute;
            transition: top 5s linear;
            top: r(-161);
            z-index: 1;
        }
        .box {
            width: 100%;
            height: 100%;
            position: relative;
            transition: all 2s linear;
            bottom: 0;
            .traffic_light {
                width: r(309);
                position: absolute;
                bottom: r(362);
                left: 0;
                img {
                    width: 100%;
                }
            }
            .starline {
                width: 100%;
                position: absolute;
                bottom: r(188);
                left: 0;
                img {
                    width: 100%;
                }
            }
            .roadbad_left {
                width: r(40);
                position: absolute;
                bottom: 0;
                left: 0;
                img {
                    width: 100%;
                }
            }
            .roadbad_right {
                width: r(43);
                position: absolute;
                bottom: 0;
                right: 0;
                img {
                    width: 100%;
                }
            }
        }
    }
}